<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="600px" height="600px"></canvas>
	</body>
	<script>
		//获取canvas
		let canvas = document.getElementById('mycanvas');
		//获取上下文
		let ctx = canvas.getContext('2d');
		
		
		//面向对象写法一
		class Rect{
			constructor(x,y,w,h,color) {
			    this.x=x;
			    this.y=y;
			    this.w=w;
			    this.h=h;
			    this.color=color;
			}
			update(){
				this.x++;
			}
			render(){
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x,this.y,this.w,this.h);
			}
		}
		
		//面向对象写法二
		// function Rect(x,y,w,h,color){
		// 	this.x=x;
		// 	this.y=y;
		// 	this.w=w;
		// 	this.h=h;
		// 	this.color=color;
		// }
		
		// Rect.prototype.update = function(){
		// 	this.x++;
		// }
		
		// Rect.prototype.render = function(){
		// 	ctx.fillStyle = this.color;
		// 	ctx.fillRect(this.x,this.y,this.w,this.h);
		// }
		
		let r1 = new Rect(0,0,50,50,"blue")
		
		// setInterval(()=>{
		// 	ctx.clearRect(0,0,canvas.width,canvas.height);
		// 	r1.update();
		// 	r1.render();
		// },1000/60)
		
		function gameloop() {
		    ctx.clearRect(0,0,canvas.width,canvas.height);
		    r1.update();
		    r1.render();
		    requestAnimationFrame(gameloop);
		}
		
		gameloop()
	</script>
</html>
